<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
  <script type="text/javascript">
    window.onload = function () {
      var str = '';
      var leng = 22;
      var Div = document.getElementsByTagName('div');
      var timer = null;
      var num = 0;
      var Onoff = true;
      //------生成22个div-------
      for (var i = 0; i < leng; i++) {
        str += '<div style="width:50px;height:50px;background:red;position:absolute;top:0px;left:' + i * 60 + 'px;"></div>';
      };
      document.body.innerHTML = str;
      //-----获取对象的属性值-----
      function getstyle(obj, attr) {
        return obj.currentstyle ? obj.currentstyle[attr] : getComputedStyle(obj)[attr];
      }
      //-----改变对象的属性值-----
      function Move(obj, attr, dir, target){ //
        parseInt(getstyle(obj, attr)) < target ? dir : -dir;
        clearInterval(obj.timer)
        obj.timer = setInterval(function () {
          var speed = parseInt(getstyle(obj, attr)) + dir;
          if (speed > target && dir > 0 || speed < target && dir < 0) {
            speed = target;
          }
          obj.style[attr] = speed + 'px';
          if (speed == target) {
            clearInterval(obj.timer);
          }
        }, 50)
      }
      //-----重复执行的函数-----
      function onk() {
        num = 0;
        timer = setInterval(function () {
          Onoff ? Move(Div[num], 'top', 20, 500) : Move(Div[num], 'top', -20, 0);
          num++;
          if (num == leng) {
            clearInterval(timer);
            setTimeout(function () {
              document.onclick = function () {
                onk();
                document.onclick = null;
              };
            }, 1000);
          }
        }, 100)
        Onoff = !Onoff;
      };
      onk();
    }
  </script>
</head>
<body>
</body>
</html>